<template>
    <div>
            <Card>
                <p slot="title">
				    添加车源
			    </p>
                <div>
                    <Form class="step-form" ref="dataInfo" :model="dataInfo" :rules="dataRules" :label-width="100">
                        <Row span="12">
                            <i-col span="8" >
                                <FormItem prop="brandId" label="品牌名称：" label-position="left" :label-width="150">
                                    <Select @on-change="setBrand" filterable style="width:200px" label-in-value >
                                        <Option v-for="(item,index) in brandList" :value="item.brandId" :key="index" :label="item.brandName">{{ item.brandName }}</Option>
                                    </Select>
                                </FormItem>
                            </i-col>
                            <i-col span="8" >
                                <FormItem prop="seriesId" label="品牌车系：" label-position="left" :label-width="150">
                                    <Select style="width:200px" filterable v-model="series_value">
                                        <Option-group v-for="(ite,i) in seriesList" :key="i" :label="ite.subBrand">
                                            <Option  @click.native="setCarSeries(item)" v-for="(item,index) in ite.carSeries" :value="item.seriesId" :key="index"  :label="item.seriesName">{{ item.seriesName }}</Option>
                                        </Option-group>
                                    </Select>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem prop="modelId" label="汽车车型：" label-position="left" :label-width="150">
                                    <Select  style="width:340px" v-model="model_value" filterable >
                                        <Option-group v-for="(ite,i) in modelsList" :key="i" :label="ite.carYear">
                                            <Option  @click.native="setcarModels(item)" v-for="(item,index) in ite.models" :value="item.modelId" :key="index" :label="item.modelName">{{ item.modelName }}</Option>
                                        </Option-group>
                                    </Select>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="始发地：" prop="startPlace" label-position="left" :label-width="150">
                                    <Input :disabled="false" v-model="dataInfo.startPlace" type="text" placeholder="数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="目的地：" prop="endPlace" label-position="left" :label-width="150">
                                    <Input :disabled="false" v-model="dataInfo.endPlace" type="text" placeholder="数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="开始时间：" prop="startDate" label-position="left" :label-width="150">
                                   <Date-picker  type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期和时间" style="width: 200px" @on-change="dataInfo.startDate=$event"></Date-picker>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="结束时间：" prop="endDate" label-position="left" :label-width="150">
                                   <Date-picker  type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期和时间" style="width: 200px" @on-change="dataInfo.endDate=$event"></Date-picker>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="承运商：" prop="carrier" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="dataInfo.carrier" type="text" placeholder="数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="成本价：" prop="costPrice" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="dataInfo.costPrice" type="text" placeholder="数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="运输价：" prop="transportPrice" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="dataInfo.transportPrice" type="text" placeholder="数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="支付编号：" prop="payNo" label-position="left" :label-width="150">
                                    <Input :disabled="hasSubmit" v-model="dataInfo.payNo" type="text" placeholder="数据不能为空" />
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="发票类型：" prop="invoiceType" label-position="left" :label-width="150">
                                    <Radio-group  v-model="dataInfo.invoiceType">
                                        <Radio :label="1" :value="1">增票</Radio>
                                        <Radio :label="2" :value="2">普票</Radio>
                                        <Radio :label="3" :value="3">不开票</Radio>
                                    </Radio-group>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="运输状态：" prop="transportState" label-position="left" :label-width="150">
                                    <Radio-group  v-model="dataInfo.transportState">
                                        <Radio :label="1" :value="1">待提车</Radio>
                                        <Radio :label="2" :value="2">运输中</Radio>
                                        <Radio :label="3" :value="3">在库</Radio>
                                        <Radio :label="4" :value="4">已支付</Radio>
                                    </Radio-group>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="12" >
                                <FormItem label="备注：" prop="remark" label-position="left" :label-width="150">
                                   <Input v-model="dataInfo.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                                </FormItem>
                            </i-col>
                        </Row>
                        
                        <FormItem >
                            <Button :disabled="hasSubmit" @click="saveData" style="width:100px;" type="primary">提交</Button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'

export default {
    name: 'addUser',
    data () {
        return {
            brandList:[],
            seriesList:[],
            modelsList:[],
            series_value:'',
            model_value:'',
            dataInfo: {
                brandId:'',
                brandValue:'',
                seriesValue:'',
                seriesId:'',
                modelValue:'',
                modelId:'',
                carModel:'',
                startDate:'',
                endDate:'',
                carrier:'',
                costPrice:0,
                transportPrice:0,
                payNo:'',
                invoiceType:1,
                transportState:1,
                remark:'',
                createUser:''
            },
            dataRules: {
                startDate:[
                    { required: true, message: '请设置开始时间', trigger: 'blur'}
                ],
                endDate:[
                    { required: true, message: '请设置结束时间', trigger: 'blur'}
                ],
            },
            hasSubmit: false
        }
    },
    methods: {
        // 数据初始化
        init () {
            this.$store.commit('setActiveName', 'logisticstempindex');
            this.getCarBrands();
            //this.selectBaseInfos();
        },
        setBrand(obj){
            this.dataInfo.brandId=obj.value;
            this.dataInfo.brandValue=obj.label;
            this.getCarSeries(obj.value);
            
        },
        getCarSeries(brandId){
            let _that = this;
            let url = '/adminlogin/car/getCarSeriesByBrandId'
            let data = {
                brandId:brandId
            }
            ajax.formRes(url, data).then(res => {
                _that.seriesList = res.data;
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        setCarSeries(obj){//设置车系
            this.dataInfo.seriesId=obj.seriesId;
            this.dataInfo.seriesValue=obj.seriesName;
            this.getCarModels(obj.seriesId);
            
        },
        getCarModels(seriesId){
            let _that = this;
            let url = '/adminlogin/car/getCarModelsBySeriesId'
            let data = {
                seriesId:seriesId
            }
            ajax.formRes(url, data).then(res => {
                _that.modelsList = res.data;
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        setcarModels(item){
            this.dataInfo.modelId = item.modelId
            this.dataInfo.modelValue = item.modelName
            this.dataInfo.carModel = item.modelName
        },
        getCarBrands(){
            let _that = this;
            let url = '/adminlogin/car/getCarBrands'
            let data = {}
            ajax.formRes(url, data).then(res => {
                _that.brandList = res.data
            }).catch(res => {
                console.log('有错误信息')
                // fail
            })
        },
        // 添加数据
        saveData () {
            let that = this
            that.$refs['dataInfo'].validate((valid) => {
                if (valid) {
                    that.hasSubmit = true
                    let url = 'adminlogin/templogistics/addInfo'
                    let data = that.dataInfo
                    ajax.formRes(url, data).then(res => {
                        // success
                        that.$Message.success('新增数据成功,页面正在跳转')
                        that.hasSubmit = false
                            let argu = {}
                            that.$router.push({
                                name: 'logisticstempindex',
                                params: argu
                            })
                    }).catch(res => {
                        console.log('有错误信息')
                        // fail
                    })
                } else {
                    console.log('新增失败。。。')
                }
            })
        },
        goBack () {
            this.$router.push({
                name: 'carsourceindex'
            })
        }
        
    },
    mounted () {
    },
    created: function () {
        this.init()
    },
    activated: function () {
        this.init()
    }
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>

